<template>
  <div>
    <Phead />
    <Pmsg />
    <div class="personal-content w clearfix">
         <Pmy />
         <div class="right identity">
            <h3 class="stamp">认证中心</h3>
            <ul class="change clearfix">
                <li class="active">供应商认证</li>
            </ul>
            <div class="identity-content">
                <form action="">
                    <table>
                        <tbody>
                            <tr v-for="(item,index) in msg" :key="index">
                                <td>{{item.label}}：</td>
                                <td><input @blur="getVal" :type="item.type" :placeholder="item.placehold" :id="item.id" :data-index="index" value="">
                                </td>    
                                  
                            </tr>
                            
                            <tr class="line2">
                                <td></td>
                            </tr>
                            <tr>
                                <td>所在省市：</td>
                                <td class="ip">
                                    <select v-model="province_id" @change="chosePro">
                                      <option selected="" value="0">请选择</option>

                                      <option v-for="(item,index) in provinceList" :key="index" :value="item.value" >{{item.text}}</option>
                                    </select>
                                    <span>/</span>
                                    <select v-model="city_id" @change="choseCity">
                                      <option value="0">请选择</option>
                                      
                                      <option v-for="(item,index) in cityList" :key="index" :value="item.area_id" >{{item.area_name}}</option>
                                    </select>
                                    <span>/</span>
                                    <select v-model="area_id">
                                      <option value="0">请选择</option>
                                      
                                      <option v-for="(item,index) in areaList" :key="index" :value="item.area_id" >{{item.area_name}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr v-for="(item,index) in msg2">
                                <td>{{item.label}}：</td>
                                <td><input  @blur="getVal2" :type="item.type" :placeholder="item.placehold" :id="item.id" :data-index="index" value="" ></td>
                            </tr>
                            
                            <tr class="line2">
                                <td></td>
                            </tr>
                            <tr class="file">
                                <td rowspan="2">
                                    <h2>营业执照扫描件</h2>
                                    <div class="upload imgLog2" :style="yingyeImgCss">
                                        <input data-tag="yingyeImg" @change="filesAdded" type="file" />
                                    </div>
                                </td>
                            </tr>
                            <tr class="file">
                                <td rowspan="2">
                                    <h2>医疗器械经营许可证/第二类医疗器械经营备案证</h2>
                                    <div class="upload imgLog2" :style="xvkeImgCss">
                                        <input data-tag="xvkeImg" @change="filesAdded" type="file" />
                                    </div>
                                </td>
                                <td rowspan="2">
                                    <h2>医疗器械经营许可证/第二类医疗器械经营备案证</h2>
                                    <div class="upload imgLog2" :style="xvkeImg1Css">
                                        <input data-tag="xvkeImg1" @change="filesAdded" type="file" />
                                    </div>
                                </td>
                            </tr>
                            <tr class="identity-card">
                                <td>
                                    <h2>法人代表身份证(正)</h2>
                                    <div class="upload imgLog3" :style="zhengImgCss">
                                        <input data-tag="zhengImg" @change="filesAdded" type="file" />
                                    </div>
                                </td>
                                <td>
                                    <h2>法人代表身份证(反)</h2>
                                    <div class="upload imgLog3" :style="fanImgCss">
                                        <input data-tag="fanImg" @change="filesAdded" type="file" />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <h4><input type="checkbox" checked @click="checkboxChange">注册代表同意<span>（供应商注册协议）</span></h4>
                        <button type="button" @click="submit">立即认证</button>
                </form>

            </div>       
            
        </div>

    </div>
  
  <Pfoot />

  <!-- 表单验证 -->
    <Pdailog :is-show="formAlertShow" @on-close="formAlertClose" >
         <div slot="main">{{formAlertText}}</div>
    </Pdailog>
    <!-- 确认提交 -->
    <Pdailog :is-show="fomePushShow" :is-confirm="true"  @on-close="formAlertClose" @on-confirm="confirmPush">
         <div slot="main">{{fomePushText}}</div>
    </Pdailog>

</div>

</template>
<script>
import Phead from '@/components/Phead.vue'
import Pfoot from '@/components/Pfoot.vue'
import Pmy from '@/components/Pmy.vue'
import Pmsg from '@/components/Pmsg.vue'
import Pdailog from '@/components/Pdailog.vue'

export default {
   data() {
    return {
        showAgree:false,
        action: {
            target: this.api_url+'/index/upfile/',
            fileName:'fileData',
            // prop: 'base64Value'
        },

        msg: [{  //  用户名至企业名称循环数据
          label: '用户名',
          id: 'user_name',
          type: 'text',
          placehold: '大小写字母数字5-15位',
          bindinput: 'getVal',
          val: '',
          reg: '^[A-Za-z0-9]{5,15}$'
        },{
          label: '密码',
          id: 'user_pass',
          type: 'password',
          placehold: ' 6~18 大小写字母数字',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '确认密码',
          id: 'aginPwd',
          type: 'password',
          placehold: '两次密码需一致',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '企业名称',
          id: 'company_name',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9_]{2,40}$'
        }],

        province_id: '',
        city_id: '',
        area_id: '',
        address_txt:'',
        checked:true,

        msg2: [{  // 通讯地址至邮箱循环数据
          label: '通讯地址',
          id: 'post_addr',
          type:'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^[\\S]{3,50}$'
        },{
          label: '营业执照号',
          id: 'business_license_num',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^\\w+$'
        },{
          label: '法人姓名',
          id: 'legal_person',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9]{2,40}$'
        },{
          label: '法人身份证号',
          id: 'legal_person_no',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)'
        },{
          label: '邮箱',
          id: 'user_email',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$'
        }],
        //图片列表
          yingyeImg: '',zhengImg: '',fanImg: '',xvkeImg: '',xvkeImg1:'',
          yingyeImgCss: '',zhengImgCss: '',fanImgCss: '',xvkeImgCss: '',xvkeImg1Css:'',

        provinceList:'',
        cityList:'',
        areaList:'',

        //form 错误提示
        formAlertShow:false,
        formAlertText:'提示',
        //form 提交确认
        fomePushShow:false,
        fomePushText:'提示',
        formData:{}

    }
  },
  methods: {
    submit:function(){
        let that = this;
        let userInfo = this.getUserInfo()
        let arr = this.msg;
        let arr1 = this.msg2;
        let formData ={}
        for(let i=0;i<arr.length;i++){
          formData[arr[i].id] =arr[i].val;

          if(arr[i].val === ""){
            this.formAlertShow =true
            this.formAlertText =`请输入${arr[i].label}`
          
            return false;
          }else if(new RegExp(arr[i].reg).test(arr[i].val) != true){
            this.formAlertShow =true
            this.formAlertText =`${arr[i].label}格式不正确`

            return false;
          }
        }

        for (var i = 0; i < arr1.length; i++) {
          formData[arr1[i].id] =arr1[i].val;
          if (arr1[i].val === "") {
            this.formAlertShow =true
            this.formAlertText =`请输入${arr1[i].label}`
            
            return false;
          }else if(new RegExp(arr1[i].reg).test(arr1[i].val) !=true){
            this.formAlertShow =true
            this.formAlertText =`${arr1[i].label}格式不正确`
            
            return false;
          }
        }
        if(arr[1].val != arr[2].val){
            this.formAlertShow =true
            this.formAlertText ='两次密码不一致'

            return false;
        }
        if(this.province_id == "" || this.city_id == "" ||this.area_id == ""){
            this.formAlertShow =true
            this.formAlertText ='请选择省市'

            return false;
         }
        if(!this.checked){
            this.formAlertShow =true
            this.formAlertText ='需同意注册供应商协议'
            
            return false;
        }

        if(this.yingyeImg == ''){
            this.formAlertShow =true
            this.formAlertText ='请上传营业执照扫描件'
            
            return false;
        }
         if(this.zhengImg == ''){
            this.formAlertShow =true
            this.formAlertText ='请上传法人身份证(正面)'
            
            return false;
        } 
         if(this.fanImg == ''){
            this.formAlertShow =true
            this.formAlertText ='请上传请上传法人身份证(反面)'
            
             return false;
        } 
         if(this.xvkeImg == ''){
            this.formAlertShow =true
            this.formAlertText ='请上传医疗器械经营许可证/\n第二类医疗器械经营备案证'

            return false;
        } 
        //拼接  省市区，企业扫描件 用户信息
        formData['province_id'] = this.province_id;
        formData['city_id'] = this.city_id;
        formData['area_id'] = this.area_id;
        formData['yingyeImg'] = this.yingyeImg;
        formData['zhengImg'] = this.zhengImg;
        formData['fanImg'] = this.fanImg;
        formData['xvkeImg'] = this.xvkeImg;
        if(this.xvkeImg1){
              formData['xvkeImg1'] = this.xvkeImg1;
        }
        formData['user_token'] = userInfo.user_token;
        formData['user_id'] = userInfo.user_id;

        this.formData = formData

        this.fomePushShow = true
        this.fomePushText = '可参与竞价，确定认证为供应商？'
          
      },

      getVal:function(e){
        var arr = this.msg;
        var obj = arr[e.currentTarget.getAttribute('data-index')]
        obj.val = e.target.value
        this.msg = arr
      },
      getVal2: function (e) {
        var arr = this.msg2;
        var obj = arr[e.currentTarget.getAttribute('data-index')]
        obj.val = e.target.value
        this.msg2 = arr
      },
      //所在省市区选择
        chosePro(){
          let that = this
          let re =  this.$axios.post('/index/getListArea',{
                    parent_id:this.province_id
                  }).then(function(re){
                      if(re.code == 200){
                          that.cityList =re.data
                      }
                  })

        },
        //所在省市选中
        choseCity(){
          let that = this
          let re =  this.$axios.post('/index/getListArea',{
                    parent_id:this.city_id
                  }).then(function(re){
                      if(re.code == 200){
                          that.areaList =re.data
                      }
                  })
            

        },
      //上传那图片
      filesAdded(e) {
          //取图片文件，这里只取了数组中第一张图片
          let files = e.target.files
          let tag = e.target.getAttribute('data-tag')
          const limitSize = 1 * 1024;
          const maxSize = 3 * 1024 * 1024;
          let hasIgnore = false
          let hasNotImg =false
          for (let i = 0; i< files.length; i++) {
            const file = files[i];
            // 如果选择的图片大小最大限制（这里为3M）则弹出提示
            if(file.size > maxSize){
              file.ignore = true
               hasIgnore = true
            }            
            if(file.type != 'image/jgeg' && file.type != 'image/jpeg' && file.type != 'image/png'){
              hasNotImg = true
            }
          }
          if(hasIgnore == true){
            this.formAlertShow =true
            this.formAlertText ='图片不能大于3M'

            return false;
          }else if(hasNotImg == true){
            this.formAlertShow =true
            this.formAlertText ='非图片文件，请上传jpg或者png格式图片'

          }else{
            let that =this
            let fd = new FormData();
            fd.append("fileData", files[0]);
            let config = {
                  headers:{'Content-Type':'multipart/form-data'}
            };      
            this.$axios.post('/index/upfile',fd,config).then(function(data) {
                if(data.code==200){
                    if(tag == 'yingyeImg'){
                        that.yingyeImgCss = 'background:url(' + that.api_url+'/uploads/'+data.data + ') no-repeat center/contain'
                        that.yingyeImg = data.data;
                    }

                    if(tag == 'zhengImg'){
                        that.zhengImgCss = 'background:url(' + that.api_url+'/uploads/'+data.data + ') no-repeat center/contain'
                        that.zhengImg = data.data;
                    }

                    if(tag == 'fanImg'){
                        that.fanImgCss = 'background:url(' + that.api_url+'/uploads/'+data.data + ') no-repeat center/contain'
                        that.fanImg = data.data;
                    }

                    if(tag == 'xvkeImg'){
                        that.xvkeImgCss = 'background:url(' + that.api_url+'/uploads/'+data.data + ') no-repeat center/contain'
                        that.xvkeImg = data.data;
                    }

                    if(tag == 'xvkeImg1'){
                        that.xvkeImg1Css = 'background:url(' + that.api_url+'/uploads/'+data.data + ') no-repeat center/contain'
                        that.xvkeImg1 = data.data;
                    }

                    
                }

            });

          }

          

        },
        //图片上传成功 
          // yingyeImg: '',
          // zhengImg: '',
          // fanImg: '',
          // xvkeImg: '',
          // xvkeImg1:'',
        
        checkboxChange() {
          this.checked = !this.checked
        
        },
        //表单错误提示弹框
        formAlertClose(){
            this.formAlertShow = false;
            this.fomePushShow = false;
        },
        //确认提交
        confirmPush(){
                let userInfo = this.getUserInfo()
                let that = this
                let re =  this.$axios.post('/login/sellerRegister',{
                     formData:this.formData
                }).then(function(re){
                    if(re.code == 200){
                        userInfo.user_type = 11;//供应商
                        localStorage.setItem('userInfo',JSON.stringify(userInfo))
                            //   this.is_show = false
                            //   this.show_success = true
                            
                        that.$router.push({path:'/my/usertype'})

                     }else{
                          this.formAlertShow =true
                          this.formAlertText =re.msg
                            
                     }
                })
                 
         },
  },
   async created(){
    let re =  await this.$axios.post('/index/getProList') 
        //如果是医院 ，且审核通过
        if(re.code == 200){
            
            this.provinceList = re.data
            
        }
  },
  mounted(){
    
            
  },
  components: {
    Phead,
    Pfoot,
    Pmy,
    Pmsg,
    Pdailog
  },
}
</script>